<template>
  <div>
    <h2>Home</h2>
    <!-- 1.普通写法 -->
    <router-link to="/home/news">news</router-link>
    <!-- <router-link to="/home/music/1/1min">华语music</router-link>
    <router-link to="/home/music/2/2min">粤语music</router-link>
    <router-link to="/home/music/3/3min">英语music</router-link> -->

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '1',
          time: '1min',
        },
      }"
      >华语music</router-link
    >

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '2',
          time: '2min',
        },
      }"
      >粤语music</router-link
    >

    <router-link
      :to="{
        name: 'music',
        params: {
          id: '3',
          time: '3min',
        },
      }"
      >英语music</router-link
    >

    <!-- 2.对象写法 -->
    <!-- <router-link :to="{ path: '/home/music' }">music</router-link>
    <router-link :to="{ path: '/home/news' }">news</router-link> -->

    <!-- 3.name写法 -->
    <!-- <router-link :to="{ name: 'music' }">news</router-link>
    <router-link :to="{ name: 'music' }">music</router-link> -->

    <router-link
      :to="{
        name: 'games',
        query: {
          tit: '鬼泣5',
          publisher: 'Capcom',
        },
      }"
      >游戏1</router-link
    >

    <router-link
      :to="{
        name: 'games',
        query: {
          tit: '黑暗之魂3',
          publisher: '粉丝社',
        },
      }"
      >游戏2</router-link
    >

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style>
</style>